<template>
	<view class="Details" :id="data.goods_id">
		<image class="share" src="@/static/suspend_share.png" @click="openPopup2"></image>
		<!-- 		<view class="navtop">
			<navigator open-type="navigateBack">
				<image src="@/static/nav_back_black.png"></image>
			</navigator>
		</view> -->

		<myNavbar :navigationBarStyle="navigationBarStyle" :showBack="true"></myNavbar>
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="nav">
			<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval" :duration="duration" circular>
				<swiper-item v-for="(item, index) in data.images" :key="index">
					<view class="swiper-item"><image :src="item" mode=""></image></view>
				</swiper-item>
			</swiper>
			<view class="instructions">{{ current + 1 }}/{{ data.images.length }}</view>
			<view class="djs" v-if="data.share_buy">
				<image src="../static/icon_store_Countdown@3x.png" mode="widthFix" style="width: 30rpx;"></image>
				<view class="text" v-if="data.share_buy.begin_time * 1000 > newtime">{{ $dateFormat(share_buy, 'H:i:s') }}后开始</view>
				<view class="text" v-if="data.share_buy.begin_time * 1000 < newtime">{{ $dateFormat(share_buy, 'H:i:s') }}后结束</view>
			</view>
		</uni-swiper-dot>
		<view class="title">
			<view  v-for="i in data.banner_infos" :key='i' v-if="i.position==0">
				<image 
					mode="widthFix"
					:src="i.banner_path||'../static/微信图片_20201124091755.png'"
					style="width: 100%;"
					@click="toUrl(i.banner_type, i.banner_value)"
				>
				</image>
				</view>
			<view class="banner">
				<view class="price">
					<!-- <view class="s" v-if="dataList.goods_info.group_buy_price"><span class="r">￥</span>{{dataList.goods_info.group_buy_price}}<text style="margin-left: 8rpx;color: #999999;font-size: 28rpx; text-decoration: line-through;">{{dataList.goods_info.price}}</text></view> -->
					<view class="price_left" v-if="data.share_buy">
						<text>￥</text>
						{{ data.group_buy_price }}
						<text style="margin-left: 8rpx;color: #999999;font-size: 28rpx; text-decoration: line-through;">{{ data.price }}</text>
					</view>
					<view class="price_left" v-else>
						<text>￥</text>
						{{ data.price }}
					</view>
					<view class="price_right" v-if="data.spokesman_money">
						<text>赚{{ data.spokesman_money }}</text>
						<image src="/pagesA/static/icon_details_share.png" style="width: 40rpx;height: 40rpx;    margin-left: 10rpx;"></image>
					</view>
				</view>
				<view class="Endorsement" v-if="data.vip_money" @click="$redirectTo('pages/spokesman/spokesman')">
					<view class="priceLeft">￥{{ data.vip_money }}</view>
					<view class="priceRight">如何成为代言人</view>
				</view>
				<view class="title">{{ data.name }}</view>
				<view class="introduce" v-if="data.say">
					<view class="mm">吃货说</view>
					<view class="kuang">
						<view class="ert"><view class="sdf"></view></view>
						{{ data.say }}
					</view>
				</view>
			</view>
			<view class="title" v-for="i in data.banner_infos" :key='i' v-if="i.position==1">
				<image 
					mode="widthFix"
					:src="i.banner_path||'../static/微信图片_20201124091755.png'"
					style="width: 100%;"
					@click="toUrl(i.banner_type, i.banner_value)"
				>
				</image>
				</view>
			<!-- <image v-if="data.banner_path" mode="widthFix" style="width: 100%;" :src="data.banner_path" @click="toUrl(data.banner_type, data.banner_value)"></image> -->
		</view>
		<view class="Discount" @click="GetCouponChange">
			<view class="DiscountLeft">优惠</view>
			<view class="DiscountContent">
				<view class="DiscountItem" v-for="(item, index) in dataArr" v-if="index < 2" :key="index">满{{ parseInt(item.limit) }}减{{ parseInt(item.amount) }}</view>
			</view>
			<view class="DiscountRight">领券</view>
		</view>
		<view class="Discount DiscountSolid" @click="openPopup">
			<view class="DiscountLeft">规格</view>
			<view class="DiscountContent">
				<view class="DiscountItem Option" v-if="popup2">{{data.options[redchang].name}}*{{goods_num}}</view>
				<view class="DiscountItem Option" v-else >请选择</view>
				</view>
			<view class="DiscountRight"></view>
		</view>
		<view class="Solid"><view></view></view>
		<view class="Discount" v-if="data.store_home">
			<view class="DiscountLeft">配送</view>
			<view class="DiscountContent">
				<view class="DiscountItem Option">{{ data.store_home }}</view>
			</view>
			<view class="DiscountRight"></view>
		</view>
		<view class="evaluate" @click="toeva(data.goods_id)" v-if="data.comments !== undefined && data.comments.length > 0">
			<view  class="evaluateTop">
				<view class="evaluateLeft">商品评价({{ data.comments_total }})</view>
				<view class="evaluateRight">{{ ((data.comments_nice_total / data.comments_total) * 100).toFixed(2) + '%' || '暂无' }} 好评</view>
			</view>
			<view class="banner">
				<view class="evaluateContent">
					<view class="portrait">
						<image :src="data.comments[0].avater||'../static/微信图片_20201124091755.png'" mode=""></image>
						<view>{{ data.comments[0].nickname }}</view>
						<SxRate :value="valueSync" :size="12" :touchable="false" :disabled="true" />
					</view>
					<view class="time">{{ timedata }}</view>
					<view class="content">{{ data.comments[0].content }}</view>
					<view class="Img"><image v-for="i in data.comments[0].images" :key="i" :src="i||'../static/微信图片_20201124091755.png'" mode=""></image></view>
				</view>
			</view>
		</view>
		<view class="evaluate" v-else @click="toeva(data.goods_id)">
			<view  class="evaluateTop">
				<view class="evaluateLeft">商品评价(0)</view>
				<view class="evaluateRight">0% 好评</view>
			</view>
			<view class="banner">
				<view class="evaluateContent1">
					<image src="../../static/icon_goods_comment.png" mode="widthFix" style="width: 48rpx;margin-right: 10rpx;"></image>
					<view class="title">
						新品上架暂时还没有评价<br/>
						快购买一个给我们真实的评价吧
					</view>
				</view>
			</view>
		</view>
		<view class="recommend">
			<view class="recommendTitle">
				<v-tabs
					v-model="activeTab"
					@change="changeTab"
					:scroll="false"
					color="#777777"
					activeColor="#DB1B22"
					fontSize="16px"
					lineScale="0.2"
					lineColor="#DB1B22"
					:tabs="['商品推荐', '热卖推荐']"
				></v-tabs>
			</view>
			<view class="recommendContent">
				<view class="recommendBox" v-if="Index == 0">
					<uni-swiper-dot :info="recommend_goods" :current="recommendGoodscurrent" field="content" :mode="mode">
						<swiper class="swiper-box swiper-recommendBox" @change="changerecommendGoods">
							<swiper-item v-for="(item, index) in recommend_goods" :key="index">
								<view class="swiper-item">
									<view :id="item1.goods_id" class="recommendItem" v-for="(item1, index1) in item" :key="index1">
										<image :src="item1.cover||'../static/微信图片_20201124091755.png'" @click="Details(item1.goods_id)"></image>
										<view class="ItemTitle">{{ item1.name }}</view>
										<view class="ItemPrice">￥{{ item1.price }}</view>
										<view class="ItemTag" v-if="item1.group_buy_status">
											<view>{{ item1.group_buy_status }}</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>

				<view class="recommendBox" v-else>
					<uni-swiper-dot :info="hot_sale_goods" :current="HotGoodscurrent" field="content" :mode="mode">
						<swiper class="swiper-box swiper-recommendBox" @change="changeHotGoods">
							<swiper-item v-for="(item, index) in hot_sale_goods" :key="index">
								<view class="swiper-item">
									<view :id="i.goods_id" class="recommendItem" v-for="(i, index1) in item" :key="index1">
										<image :src="i.cover||'../static/微信图片_20201124091755.png'" @click="Details(i.goods_id)"></image>
										<view class="ItemTitle">{{ i.name }}</view>
										<view class="ItemPrice">￥{{ i.price }}</view>
										<view class="ItemTag" v-if="i.group_buy_status">
											<view>{{ i.group_buy_status }}</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
			</view>
		</view>
		<view class="Notice">
			<view class="NoticeTitle">购前须知</view>
			<view class="NoticeReminder" v-for="(item, index) in Notice" :key="index" v-show="item[1] ? false : true">
				<view class="ReminderLeft">{{ item[0] }}:</view>
				<view class="ReminderRight">{{ item[1] }}</view>
			</view>
			<!-- <view class="NoticeClick" @click="Openbox" v-if="Openchange == false">
				<view>点击查看更多</view>
				<image src="@/static/direction_right_blackcopy2.png"></image>
			</view> -->
		</view>
		<uni-popup ref="popup1" type="bottom" @change="ew">
			<view class="canGetCoupon">
				<image class="img" src="@/static/nav_close.png" @click="popup1close()" style="width: 60rpx;height: 60rpx;"></image>
				<view class="item_title">商品劵</view>
				<scroll-view scroll-y class="canGetCouponitem">
					<view class="item" v-for="(item, index) in dataArr" :key="index">
						<view class="q flex_r_between">
							<view class="flex_r_start">
								<view class="dw">￥</view>
								<view class="jiazhi">{{ parseInt(item.amount) }}</view>
							</view>
							<view>
								<view class="fw">{{ item.name }}</view>
								<view class="rq">{{ $dateFormat(item.date_start * 1000, 'Y.m.d') }}-{{ $dateFormat(item.date_end * 1000, 'Y.m.d') }}</view>
							</view>
							<view class="ljsy" @click="syyhj(item.coupon_id)">立即使用</view>
						</view>
						<view class="line"></view>
						<view class="flex_r_between" @click="openauanbu(index)">
							<view class="tip" :class="{ isOpen: isOpen == index ? false : true }">{{ item.content }}</view>
							<view><image style="width: 24rpx;height: 24rpx;" src="../../static/spokesmanImg/icon/direction_right_black.png" mode=""></image></view>
						</view>

						<view class="psi l"></view>
						<view class="psi r"></view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<rich-text style="width: 100%;" :nodes="strings"></rich-text>
		<BottomStatus></BottomStatus>
		<uni-popup ref="popup" type="bottom" @change="ew">
			<view class="gwpp">
				<view class="topic flex_r_end"><image class="cllor" src="/pagesA/static/nav_close.png" @click="closePopup"></image></view>
				<view class="dd flex_r_between">
					<view class="ddImg"><image style="width: 140rpx;height: 140rpx;" :src="data.images[0]||'../static/微信图片_20201124091755.png'" mode=""></image></view>
					<view style="width: 490rpx;">
						<view class="tterb">{{ data.name }}</view>
						<view class="jg">
							<span class="s">￥</span>
							{{ data.options[redchang].price }}
						</view>
						<view class="yfkc">库存 {{ data.options[redchang].stock }}</view>
					</view>
				</view>
				<view class="ggBox">
					<view class="gg">规格</view>
					<view class="flex_r_start_wrap">
						<view class="item" v-for="(v, i) in data.options" :key="v" @click="changeitem(i)" :class="redchang == i ? 'item1' : ''">{{ v.name }}</view>
					</view>
				</view>
				<view class="ggBox">
					<view class="gg">数量</view>
					<view class="flex_r_start height">
						<view class="add_sub item_sub" :class="{ bor_CBCCCD: goods_num <= 1 }" @click="goods_num--">-</view>
						<view class="add_sub item_value"><input disabled type="text" v-model="goods_num" /></view>
						<view class="add_sub item_add" :class="{ bor_CBCCCC: goods_num >= data.options[redchang].stock }" @click="goods_num++">+</view>
					</view>
				</view>
			</view>
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" class="savebottom" />
		</uni-popup>
		<uni-popup ref="popup4" type="center">
			<!-- <view class="canGetCoupon1" style="overflow-x: scroll;" v-if="popup4"> -->
				
			<view class="popup2">
				<canvas style="width: 375px;height: 680px;" canvas-id="mycanvas" type="mycanvas" @error="canvasIdErrorCallback" />
				<button style="position: absolute;bottom: 0;left: 40%;" @click='addd' size="mini" type="warn">保存图片</button>
			</view>
		</uni-popup>
			<!-- </view> -->
		<uni-popup ref="popup3" type="center">
			<view class="popup2">
				<image :src="dataList.goods_info.share.share_origin_image||'../static/微信图片_20201124091755.png'" mode="widthFix" style="width: 100%;"></image>
				<view class="title" style="font-size: 24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #333333; margin-bottom: 10px;">
					{{ dataList.goods_info.share.share_title }}
				</view>
				<view class="price" style="font-size: 36rpx;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #DB1B22; margin-bottom: 10px;">
					￥{{ dataList.goods_info.group_buy_price }}
				</view>
				<view class="ps" style="font-size: 24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #333333;margin-bottom: 10px;">
					分享到朋友圈可安活动价购买哦
				</view>
				<view class="button" style="background: red;color: #fff; padding: 5px 20px;border-radius: 50px;">立即分享</view>
			</view>
		</uni-popup>
		<view class="uni-goods-nav savebottom">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
			<view class="uni-goods-nav-buttom" v-if="data.share_buy.share_count==0" @click="openPopup2">
				<text style="font-size: 24rpx;height: 32rpx;line-height: 32rpx;">拼团购买</text>
				<text style="font-size: 24rpx;height: 32rpx;line-height: 32rpx;">拼团购买，立省{{ data.price - data.group_buy_price }}元</text>
			</view>
			<view class="uni-goods-nav-buttom" v-else @click="openPopup2">
				<text style="font-size: 24rpx;height: 32rpx;line-height: 32rpx;">购买，立省{{ data.price - data.group_buy_price }}元</text>
			</view>
		</view>

		<button class="contact" type="default" open-type="contact"></button>
		<uni-popup ref="popup2" type="center">
			<view class="ModalHide" @click="changeModel()">
				<image style="width: 400rpx;position: absolute;top: 90px;right: 90px;" src="/pagesA/static/c51551bb9e0b247d112cad949a588cd.png" mode="widthFix"></image>
				<view class="Share">
					<button id="wx" open-type="share" plain class="shareItem share1" @click="changeModel('wx')">
						<image src="@/static/share_wx.png"></image>
						<view class="content">微信好友</view>
					</button>
					<button plain class="shareItem share1" @click.stop="changeModel('ewm')">
						<image src="@/static/share_ewm.png"></image>
						<view class="content">二维码海报</view>
					</button>
				</view>
				<view class="Share Share1">
					<view class="shareItem" @click="changeModel()"><image class="shareimg" src="@/static/cloce_white.png"></image></view>
				</view>
			</view>
		</uni-popup>
			<view class="Dialog" v-if="sharee">
			<view class="Dialog_item">
				<image src="../../../../static/popup_window_1.png"></image>
				<view class="Dialog_content">
					<view class="Dialog_content_title">
						好友***
					</view>
					<view class="Dialog_content_title">
						邀请你为TA助力抢活动商品
					</view>
					<view class="Dialog_content_buttom" @click="sharee1">
						为TA助力
					</view>
				</view>
			</view>
			<image @click="sharee1" src="../../../../static/cloce_white.png" mode=""></image>
		</view>
		<view class="Dialog" v-if="share1_buy">
			<view class="Dialog_item">
				<image src="../../../../static/popup_window_2.png"></image>
				<view class="Dialog_content">
					<view class="Dialog_content_title">
						助力成功
					</view>
					<view class="Dialog_content_title">
						送您***红包
					</view>
					<view class="Dialog_content_buttom" @click="sharee1">
						点击领取
					</view>
				</view>
			</view>
			<image @click="sharee1" src="../../../../static/cloce_white.png" mode=""></image>
		</view>
		<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
		<input v-if="ifShow" class="uni-input" placeholder="请输入要生成的二维码内容" v-model="val" />
		<button v-if="ifShow" type="primary" @tap="creatQrcode">生成二维码</button>
	</view>
</template>

<script>
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue';
import BottomStatus from '@/components/BottomStatus/BottomStatus.vue';
import SxRate from '@/components/sx-rate/index.vue';
import md5 from '@/common/api/md5.js';
import { requestUrl } from '@/common/config.js';
import { formatDate } from '@/common/utils/transUtils.js';

import myNavbar from '@/myComponents/myNavbar.vue';
export default {
	components: {
		uniSwiperDot,
		uniGoodsNav,
		SxRate,
		BottomStatus,
		myNavbar
	},
	data() {
		return {
			popup4:false,
			ifShow: false,
			share1_buy:null,
			val: '', // 要生成的二维码值
			size: 200, // 二维码大小
			unit: 'upx', // 单位
			background: '#fff', // 背景色
			foreground: '#000', // 前景色
			pdground: '#000', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: true, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: 'https://wap.feelmao.com/goods_detail.html?customer_id=0&goods_id=143', // 二维码生成后的图片地址或base64
			autoplay: true,
			interval: 4000,
			duration: 500,
			goods_num: 1,
			isOpen: NaN,
			GetCoupon: false,
			dataArr: [],
			navigationBarStyle: {
				background: '',
				fontColor: '#000000',
				iconColor: '#000000',
				iconText: ''
			},
			hot_sale_goods: [],
			recommend_goods: [],
			info: [
				{
					content: '内容 A'
				},
				{
					content: '内容 B'
				},
				{
					content: '内容 C'
				}
			],
			current: 0,
			HotGoodscurrent: 0,
			recommendGoodscurrent: 0,
			mode: 'round',
			length: NaN,
			options: [
				{
					icon: 'icon-shouye',
					text: '首页'
				},
				{
					icon: 'icon-shouye',
					text: '购物车',
					info: 0
				},
				{
					icon: 'icon-shouye',
					text: '客服',
					infoBackgroundColor: '#007aff',
					infoColor: 'red'
				}
			],
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#CA9756',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: '#DB1B22',
					color: '#fff'
				}
			],
			valueSync: null,
			activeTab: 0,
			Index: '',
			data: [],
			Openchange: false,
			share_buy: '',
			goods_id: '',
			NewNotice: [],
			newtime: '',
			Modlechang: true,
			Notice: [],
			timedata: '',
			access_token: '',
			user_info: [],
			redchang: 0,
			getCarts: [],
			popup1: false,
			popup2: false,
			sharee:false,
			Timer: null,
			tt:null,
			strings: "<img src='https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png'/>",
			paths:''
		};
	},
	onReady() {
		this.Notice.forEach((v, i) => {
			if (i < 3) {
				this.NewNotice.push(v);
			}
		});
	},
	onLoad(e){
		if(e.share_buy_id){
			this.$request('/app/app/goods/inviteShareGoods', 'post', {
				share_buy_id: e.share_buy_id,
				goods_id: e.goods_id,
				customer_id: e.customer_id,
			}).then(res => {
				this.share1_buy=res.content
			});
		}
	},
	watch: {
		goods_num: function(val, oldVal) {
			if (val < 0) {
				this.goods_num = 0;
			}
			if (val > this.data.options[this.redchang].stock) {
				this.goods_num = this.data.options[this.redchang].stock;
			}
			this.popup2=true
		},
		value(e) {
			this.valueSync = e;
		}
	},
	onPageScroll(e) {
		// console.log(e.scrollTop);//距离页面顶部距离
		if (e.scrollTop > 138) {
			this.navigationBarStyle.iconText = '商品详情';
			this.navigationBarStyle.background = '#ffffff';
		} else {
			this.navigationBarStyle.iconText = '';
			this.navigationBarStyle.background = '';
		}
	},
	onShow() {
		if (uni.getStorageSync('access_token')) {
			this.access_token = JSON.parse(uni.getStorageSync('access_token'));
		}
		if (uni.getStorageSync('user_info')) {
			this.user_info = JSON.parse(uni.getStorageSync('user_info'));
		}
		this.getcart();
		this.creatQrcode();
	},
	onShareAppMessage: function () {
	 return {
	  title: '111',
	  desc: '111',
	  path: '/pagesA/CommodityDetails/CommodityDetails' // 路径，传递参数到指定页面。
	 }
	},
	onLoad(e) {
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		
		this.$request('/app/coupon/canGetCoupon', 'post', {}).then(res => {
			this.dataArr = res.content;
		});
		let time = new Date().getTime();
		let _this = this;
		let Time = ['time', time].join('=');
		if (e.goods_id){
			this.goods_id = e.goods_id;
		}else if(uni.getStorageSync('goods_id')) {
			this.goods_id = JSON.parse(uni.getStorageSync('goods_id'));
		} 
		let Goods_id = ['goods_id', this.goods_id].join('=');
		let Access_token = ['access_token', this.access_token].join('=');
		let content = ['content=pinet.FeiMao.2017'].join();
		let arr = [content, Goods_id, Time].sort(function(a, b) {
			a - b;
		});
		let newarr = md5(arr.join('&'));
		uni.request({
			url: requestUrl + '/app/goods/getGoodsDetail', //仅为示例，并非真实接口地址。
			method: 'GET',
			data: {
				time: time,
				goods_id: this.goods_id,
				sign: newarr,
				access_token: this.access_token
			},
			success: res => {
				_this.strings = res.data.content.description.replace(/\/>/gi, 'style="width:100%;height:auto;" />');
				// _this.strings=res.data.content.description.replace(/\<p style="/gi,'<p style="text-align: center;max-width:100%"')
				_this.data = res.data.content;
				
				// _this.share_buy = res.data.content.share_buy;
				_this.val = res.data.content.share.url;
				_this.downLoadImg(res.data.content.share.share_origin_image);
				if (res.data.content.comments.length > 0) {
					_this.valueSync = Number(res.data.content.comments[0].score);
					_this.timedata = dateTO(res.data.content.comments[0].date_add * 1000);
				} else {
				}
				if(res.data.content.share_buy){
					_this.sharee=true
				}
				function dateTO(data) {
					//data为时间戳
					var date = new Date(data);
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
					var strDate = Y + M + D + h + m + s; //转换为年月日时分秒
					var strDate = Y + M + D; //转换为年月日
					return strDate;
				}

				function group(array, subGroupLength) {
					let index = 0;
					let newArray = [];
					while (index < array.length) {
						newArray.push(array.slice(index, (index += subGroupLength)));
					}
					return newArray;
				}
				let Array = _this.data.hot_sale_goods;
				_this.hot_sale_goods = group(Array, 6);
				_this.recommend_goods = group(_this.data.recommend_goods, 6);

				function trimSpace(array) {
					for (var i = 0; i < array.length; i++) {
						if (array[i] == '' || typeof array[i] == 'undefined') {
							array.splice(i, 1);
							i = i - 1;
						}
					}
					return array;
				}
				let arr = trimSpace(res.data.content.before_mai.split(/[\n\r]/));
				_this.Notice = arr.map(v => {
					return v.split('：');
				});
			}
		});
		// uni.request({
		// 	url: 'http://dev.feelmao.com/app/coupon/canGetCoupon', //仅为示例，并非真实接口地址。
		// 	success: (res) => {
		// 		console.log(res)
		// 	}
		// });
		this.Timer = setInterval(v => {
			this.ddjs();
		}, 1000);
	},
	onShareAppMessage(res) {
		if (res.target.id === 'puq') {
			// 来自页面内分享按钮
		}
		return {
			
		};
	},
	onShareTimeline: function() {
		return {
			title: this.data.share.share_title,
			imageUrl: this.data.share.share_image,
			query: this.data.share.url
		};
	},
	destroyed() {
		clearInterval(this.Timer);
		clearInterval(this.tt)
	},
	// onReady: function(e) {
	// 	this.getcanvas();
	// },
	methods: {
		sharee1(){
			this.sharee=false
		},
		addd(){
			console.log(1)
			let __that = this;
			uni.canvasToTempFilePath({
			  canvasId: 'mycanvas',
			  success: function(res) {
			    // 在H5平台下，tempFilePath 为 base64
			    console.log(res.tempFilePath)
				uni.getImageInfo({
				            src: res.tempFilePath,
				            success: function (image) {
				                console.log(image.path);
								uni.saveImageToPhotosAlbum({
									filePath: image.path,
									success() {
										uni.showToast({
											title:'保存成功'
										})
										this.$refs.popup4.close();
										console.log("success");
									},
									fail(e){
										//如果拒绝,让保存图片按钮变成打开设置的
										console.log(e)
										if(e.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || e.errMsg === "saveImageToPhotosAlbum:fail auth deny" || e.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
										　　　　　　　　　　wx.showModal({
										　　　　　　　　　　　　title: '提示',
										　　　　　　　　　　　　content: '需要您授权保存相册',
										　　　　　　　　　　　　showCancel: false,
										　　　　　　　　　　　　success: modalSuccess => {
										　　　　　　　　　　　　　　wx.openSetting({
										　　　　　　　　　　　　　　　　success(settingdata) {
										　　　　　　　　　　　　　　　　　　if (settingdata.authSetting['scope.writePhotosAlbum']) {
										　　　　　　　　　　　　　　　　　　　
										this.$refs.popup4.close();　console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
										　　　　　　　　　　　　　　　　　　}else {
										　　　　　　　　　　　　　　　　　　　　
										this.$refs.popup4.close();console.log('获取权限失败，给出不给权限就无法正常使用的提示')
										　　　　　　　　　　　　　　　　　　}
										　　　　　　　　　　　　　　　　}
										　　　　　　　　　　　　　　})
										　　　　　　　　　　　　}
										　　　　　　　　　　})
										　　　　　　　　}　　
									}
								})
				            }
				        });

			  } 
			})
		},
		downLoadImg(netUrl) {
		    wx.getImageInfo({
		      src: netUrl,    //请求的网络图片路径
		      success:(res)=> {
		        //请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中
				this.paths=res.path
				console.log(this.paths)
		      }
		    })
		  },
		qrR(res) {
			this.src = res;
			this.getcanvas();
		},
		creatQrcode() {
			this.$refs.qrcode._makeCode();
			console.log(this.src);
			this.qrR();
		},
		getcanvas() {
			var context = uni.createCanvasContext('mycanvas');
			context.setFillStyle('#fff')
			context.setTextAlign('center');
			context.setFontSize(32);
			context.setFillStyle('#333');
			context.fillText('肥猫商城', 185, 64);
			context.setTextAlign('center');
			context.setFontSize(12);
			context.setFillStyle('#333');
			context.fillText(this.data.share.share_desc, 185, 104);
			context.setStrokeStyle('#F3F4F5');
			context.strokeRect(30, 145, 315, 440);
			console.log(this.paths,1212)
			context.drawImage(this.paths, 30, 145, 315, 315);
			// context.drawImage(uni.getStorageSync('storageKeyUrl'), 30, 145, 315, 315);
			context.setTextAlign('center');
			context.setFontSize(16);
			context.setFillStyle('#333');
			// context.fillText(this.data.share.share_title, 185, 500);
			writeTextOnCanvas(context, 16, 40, this.data.share.share_title ,185, 500)
			
			function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){
				function getTrueLength(str){//获取字符串的真实长度（字节长度）
					var len = str.length, truelen = 0;
					for(var x = 0; x < len; x++){
						if(str.charCodeAt(x) > 128){
							truelen += 2;
						}else{
							truelen += 1;
						}
					}
					return truelen;
				}
				function cutString(str, leng){//按字节长度截取字符串，返回substr截取位置
					var len = str.length, tlen = len, nlen = 0;
					for(var x = 0; x < len; x++){
						if(str.charCodeAt(x) > 128){
							if(nlen + 2 < leng){
								nlen += 2;
							}else{
								tlen = x;
								break;
							}
						}else{
							if(nlen + 1 < leng){
								nlen += 1;
							}else{
								tlen = x;
								break;
							}
						}
					}
					return tlen;
				}
				for(var i = 1; getTrueLength(text) > 0; i++){
					var tl = cutString(text, bytelength);
					ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
					text = text.substr(tl);
				}
			}
			// context.setTextAlign('center');
			// context.setFontSize(16);
			// context.setFillStyle('#999999');
			// context.fillText('肥猫爆款，吃一口就爱上', 185, 550);
			context.setFontSize(12);
			context.setFillStyle('#DB1B22');
			context.fillText('￥', 164, 550);
			context.setFontSize(16);
			context.setFillStyle('#DB1B22');
			context.fillText(this.data.price, 190, 550);
			context.drawImage(this.src, 30, 605, 65, 65);
			context.setFontSize(12);
			context.setTextAlign('left');
			context.setFillStyle('#999999');
			context.fillText('长按图片识别二维码', 100, 634);
			context.setFontSize(12);
			context.setFillStyle('#999999');
			context.fillText('查看商品详情', 100, 651);
			context.stroke();
			context.draw();
		},
		toeva(e){
			uni.navigateTo({
				url:'/pagesA/Evaluate/Evaluate?goods_id='+e
			})
		},
		ddjs() {
				this.newtime = new Date().getTime();
				if (this.data.share_buy) {
					let begin_time = this.data.share_buy.begin_time * 1000;
					// this.tt=setInterval(v=>{
					// 	begin_time-=100
					// 	console.log(begin_time)
					// 	console.log(1)
					// },100)
					if (begin_time * 1000 > this.newtime) {
						this.share_buy = begin_time * 1000 - this.newtime;
					} else {
						this.share_buy = this.data.share_buy.end_time * 1000 - this.newtime;
					}
				} else {
					return;
				}
		},
		syyhj(e) {
			this.$request('/app/coupon/drawCoupon', 'post', {
				access_token: this.access_token,
				coupon_id: e
			}).then(res => {
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
			});
		},
		openauanbu(index) {
			if (this.isOpen === NaN || this.isOpen !== index) {
				this.isOpen = index;
			} else {
				this.isOpen = NaN;
			}
		},
		getcart() {
			this.$request('/app/cart/getCarts', 'post', {
				access_token: this.access_token
			}).then(res => {
				if (res.errcode == 0) {
					let num = 0;
					this.options[1].info = res.content.length;
					this.getCarts = res.content;
				}
			});
		},
		saveImage() {
			this.isShowPopup = false;
			uni.saveImageToPhotosAlbum({
				filePath: this.path,
				success(res) {
					uni.showToast({
						title: '已保存到相册',
						icon: 'success',
						duration: 2000
					});
					this.$refs.popup4.close();
				}
			});
		},
		toUrl(i, e) {
			if (i == 0) {
				// uni.setStorage({
				// 	key: 'goods_id',
				// 	data: JSON.stringify(e),
				// 	success: function() {}
				// });
				uni.navigateTo({
					url: '/pagesA/CommodityDetails/CommodityDetails?goods_id=' + e
				});
			} else if (i == 1) {
				uni.navigateTo({
					url: '/pages/home/home/article_detail?article_id=' + e
				});
			} else if (i == 2) {
				uni.navigateTo({
					url: '/pages/spokesman/My_coupons'
				});
			}
		},
		ew(e) {
			this.popup1 = e.show;
		},
		changeitem(e) {
			this.redchang = e;
			this.popup2=true
		},
		changeModel(e) {
			if (e == 'close') {
				this.Modlechang = !this.Modlechang;
			} else if (e == 'ewm') {
				this.ifShow=true
				// this.creatQrcode();
				this.$refs.popup2.close();
				this.$refs.popup4.open();
				// this.popup4=true
				setTimeout(v=>{
					this.ifShow=false
				},5000)
			} else if (e == 'puq') {
				// uni.share({
				//     provider: "weixin",
				//     scene: "WXSenceTimeline",
				//     type: 1,
				//     summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				//     success: function (res) {
				//         console.log("success:" + JSON.stringify(res));
				//     },
				//     fail: function (err) {
				//         console.log("fail:" + JSON.stringify(err));
				//     }
				// });
				// uni.share({
				//     provider: 'weixin',
				//     scene: "WXSenceTimeline",
				//     type: 5,
				//     imageUrl: this.data.share.share_image,
				//     title: this.data.share.share_title,
				//     miniProgram: {
				//         id: 'wxa51fb057e415c022',
				//         path: 'pagesA/CommodityDetails/CommodityDetails',
				//         type: 0,
				//         webUrl: 'http://uniapp.dcloud.io'
				//     },
				//     success: ret => {
				//         console.log(JSON.stringify(ret));
				//     }
				// });
			} else if (e == 'wx') {
				// uni.share({
				//     provider: "weixin",
				//     scene: "WXSenceTimeline",
				//     type: 1,
				//     summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				//     success: function (res) {
				//         console.log("success:" + JSON.stringify(res));
				//     },
				//     fail: function (err) {
				//         console.log("fail:" + JSON.stringify(err));
				//     }
				// });
				// uni.share({
				//     provider: 'weixin',
				//     scene: "WXSceneSession",
				//     type: 5,
				//     imageUrl: this.data.share.share_image,
				//     title: this.data.share.share_title,
				//     miniProgram: {
				//         id: 'wxa51fb057e415c022',
				//         path: 'pagesA/CommodityDetails/CommodityDetails',
				//         type: 0,
				//         webUrl: 'http://uniapp.dcloud.io'
				//     },
				//     success: ret => {
				//         console.log(JSON.stringify(ret));
				//     }
				// });
			} else {
				this.$refs.popup2.close();
			}
		},
		openPopup2() {
			this.$refs.popup2.open();
		},
		popup1close() {
			this.$refs.popup1.close();
		},
		openPopup() {
			this.$refs.popup.open();
			this.popup1 = true;
		},
		closePopup() {
			this.$refs.popup.close();
			this.popup1 = false;
		},
		Details(e) {
			// uni.setStorage({
			//     key: 'goods_id',
			//     data: JSON.stringify(e),
			//     success: function () {
			//     }
			// });
			uni.navigateTo({
				url: '/pagesA/CommodityDetails/CommodityDetails?goods_id=' + e
			});
		},
		GetCouponChange() {
			this.$refs.popup1.open();
		},
		Number() {
			return 55;
		},
		Openbox() {
			this.Notice.forEach((v, i) => {
				if (i >= 3) {
					this.NewNotice.push(v);
				}
			});
			this.Openchange = true;
		},
		change(e) {
			this.current = e.detail.current;
		},
		changeHotGoods(e) {
			this.HotGoodscurrent = e.detail.current;
		},
		changerecommendGoods(e) {
			this.recommendGoodscurrent = e.detail.current;
		},
		onClick(e) {
			if (e.index == 0) {
				uni.switchTab({
					url: '/pages/shopping/shopping/shopping'
				});
			} else if (e.index == 1) {
				uni.navigateTo({
					url: '/pagesA/cart/cart'
				});
			}
			uni.showToast({
				title: `点击${e.content.text}`,
				icon: 'none'
			});
		},
		buttonClick(e) {
			let _this = this;
			let time = Math.round(new Date().getTime() / 1000).toString();
			let Time = ['time', time].join('=');
			let Access_token = ['access_token', this.access_token].join('=');
			let content = ['content=pinet.FeiMao.2017'].join();
			let arr = [Time].sort(function(a, b) {
				a - b;
			});
			let t = 3;
			let arr2 = [];
			let obj = {};
			if (this.popup1 == false) {
				this.popup1 = true;
				return this.$refs.popup.open();
			}
			if(this.data.options[this.redchang].stock!=0){
				
			(obj.quantity = this.goods_num),
				(obj.cart_id = this.data.cart_id),
				(obj.goods_id = this.data.goods_id),
				(obj.option_id = this.data.options[this.redchang].id),
				(obj.is_collect = this.data.is_collection),
				arr2.push(obj);
			let Arr1 = JSON.stringify(arr2);
			let newarr = md5(arr.join('&'));

			if (e.index == 0) {
				let ee = 2;
				this.$request('/app/cart/addcart', 'post', {
					access_token: this.access_token,
					time: time,
					sign: newarr,
					goods_id: this.data.goods_id,
					quantity: this.goods_num,
					option_id: this.data.options[this.redchang].id,
					is_collect: this.data.is_collection
				}).then(res => {
					if (res.errcode == 99) {
						uni.showModal({
							title: '提示',
							content: res.message,
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								} else if (res.cancel) {
									uni.showToast({
										title: '取消登录'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message
						});
						this.getcart();
					}
				});
			} else {
				
				let ee = 1;
				this.$request('/app/cart/settlement', 'post', {
					access_token: this.access_token,
					time: time,
					sign: newarr,
					type: '1',
					t: t,
					data: Arr1
				}).then(res => {
					if (res.errcode == 99) {
						uni.showModal({
							title: '提示',
							content: res.message,
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								} else if (res.cancel) {
									uni.showToast({
										title: '取消登录'
									});
								}
							}
						});
					} else {
						uni.setStorage({
							key: 'content',
							data: JSON.stringify(res.content),
							success: function() {}
						});
						uni.navigateTo({
							url: '/pagesA/ConfirmOrder/ConfirmOrder'
						});
					}
				});
			}
			}
		},
		changeTab(index) {
			this.Index = index;
			this.recommendGoodscurrent = 0;
			this.HotGoodscurrent = 0;
		}
	}
};
</script>

<style lang="less" scoped>
@import url('@/static/css/flex.css');
page {
	height: auto;
	.popup2 {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		padding: 5px;
		padding-bottom: 20px;
	}
	.contact {
		position: fixed;
		bottom: 3px;
		left: 97px;
		z-index: 99999;
		height: 88rpx;
		width: 92rpx;
		background: none;
		border: 1px solid rgba(0, 0, 0, 0);
		color: #fff;
		&::after {
			border: none;
		}
	}
	.gwpp {
		width: 100%;
		height: auto;
		margin: auto;
		background: #ffffff;
		border-radius: 5px;
		padding: 0 30rpx 40rpx;
		box-sizing: border-box;
		.topic {
			padding-top: 22rpx;
			position: relative;
			.cllor {
				width: 40rpx;
				height: 40rpx;
			}

			.topText {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
		.dd {
			margin: 30rpx 0;
			.ddImg {
				width: 140rpx;
				height: 140rpx;
				background: #d8d8d8;
				border-radius: 10rpx;
				overflow: hidden;
			}
			.tterb {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				overflow: hidden;
			}
			.jg {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #db1b22;
				margin: 16rpx 0;
				.s {
					font-size: 24rpx;
				}
			}
			.yfkc {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}
		}
		.ggBox {
			padding: 10rpx 0;
			box-sizing: border-box;
			.gg {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-bottom: 20rpx;
			}
			.item {
				width: auto;
				height: 60rpx;
				padding: 0 20rpx;
				background: #ffffff;
				border-radius: 4rpx;
				border: 1px solid #333333;
				line-height: 60rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-bottom: 10rpx;
			}
			.item1 {
				color: #db1b22;
				border: 1px solid #db1b22;
			}
			.add_sub {
				width: 90rpx;
				height: 60rpx;
				background: #ffffff;
				border-radius: 0rpx;
				border: 1px solid #333333;
				line-height: 60rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
			.item_sub {
				border-right: none;
			}
			.bor_CBCCCD {
				border-top: 1px solid #cbcccd;
				border-bottom: 1px solid #cbcccd;
				border-left: 1px solid #cbcccd;
			}
			.bor_CBCCCC {
				border-top: 1px solid #cbcccd;
				border-bottom: 1px solid #cbcccd;
				border-right: 1px solid #cbcccd;
			}
			.item_value {
				min-width: 120rpx;
				input {
					height: 100%;
				}
			}
			.item_add {
				border-left: none;
			}
		}
		.height {
			margin-bottom: 100rpx;
		}
		.bgc_DB1B22 {
			background-color: #db1b22;
		}
	}
	.savebottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.canGetCoupon1 {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}
	.canGetCoupon {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		width: 100%;
		max-height: 400px;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		// padding-bottom: 120rpx;
		box-sizing: border-box;
		z-index: 99;
		.item_title {
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.img {
			position: absolute;
			top: 20rpx;
			right: 8rpx;
		}
		.canGetCouponitem {
			// display: flex;
			// flex-direction: column;
			max-height: 500px;
			overflow-x: scroll;
			.item {
				width: 690rpx;
				height: auto;
				background: linear-gradient(90deg, #ec7172 0%, #ff928f 100%);
				border-radius: 10rpx;
				margin: 0 auto 30rpx;
				position: relative;
				overflow: hidden;
				color: #fff;
				padding: 0 40rpx 20rpx;
				box-sizing: border-box;
				.q {
					height: 140rpx;
					.dw {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
						margin-top: 40rpx;
					}
					.jiazhi {
						font-size: 80rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #ffffff;
					}
					.fw {
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #ffffff;
					}
					.rq {
						margin-top: 8rpx;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
					}
					.ljsy {
						width: 140rpx;
						height: 44rpx;
						background: #ffffff;
						border-radius: 22rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #eb5e5f;
						text-align: center;
						line-height: 44rpx;
					}
				}
				.line {
					margin: 10rpx 0;
					border-bottom: 1px dashed #fff;
				}
				.tip {
					height: auto;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}
				.isOpen {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.CouponitemTitle {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.Couponitemtop {
				padding: 26rpx 40rpx;
				display: flex;
			}
		}
	}

	.Details {
		// height: 100%;
		// overflow-y: scroll;
		background-color: #f3f4f5;

		.Dialog {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 99999;
			& > image {
				width: 70rpx;
				height: 70rpx;
			}
			.Dialog_item {
				margin-bottom: 60rpx;
				& > image {
					width: 580rpx;
					height: 320rpx;
					margin-bottom: -4px;
				}
				.Dialog_content {
					background-color: #fff;
					width: 500rpx;
					padding: 40rpx;
					border-radius: 0px 0px 30rpx 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					.Dialog_content_title {
						font-weight: bold;
						font-family: PingFangSC-Regular, PingFang SC;
					}
					.Dialog_content_buttom {
						margin-top: 30rpx;
						color: #fff;
						background: linear-gradient(top, #fe7746, #fa4146);
						font-family: PingFangSC-Regular, PingFang SC;
						padding: 10rpx 40rpx;
						border-radius: 50px;
						font-size: 36rpx;
					}
				}
			}
		}
		.ModalHide {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100010;

			.Share {
				position: absolute;
				bottom: 230rpx;
				left: 80rpx;
				width: 80%;
				display: flex;
				justify-content: space-between;

				.shareItem {
					text-align: center;
					.shareimg {
						width: 60rpx;
						height: 60rpx;
					}
					image {
						width: 120rpx;
						height: 120rpx;
					}
					.content {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
					}
				}
				.share1 {
					// width: 84rpx;
					// height: 84rpx;
					padding: 0;
					// border-radius: 50%;
					border: none;
					background: rgba(0, 0, 0, 0);
				}
			}
			.Share1 {
				bottom: 80rpx;
				justify-content: center;
			}
		}

		bottom-status {
			margin: 20rpx 0;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			padding: 10rpx 0 110rpx;

			.bottom-line {
				display: flex;
				align-items: center;
				margin: 0 auto;

				.line {
					width: 100rpx;
					height: 1rpx;
					background: #777777;
				}

				.line-font {
					font-size: 32rpx;
					color: #777777;
					margin: 0 18rpx;
				}
			}
		}

		.banner {
			// padding-top: 30rpx;
			    border-bottom: 1px solid #fff;
			margin: 0 30rpx;
			& > .title {
				padding: 10rpx 0;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
		.uni-goods-nav {
			width: 100%;
			position: fixed;
			z-index: 999;
			bottom: 0;
			left: 0;
			background-color: #fff;
			.uni-goods-nav-buttom {
				position: absolute;
				top: 12rpx;
				right: 10rpx;
				width: 495rpx;
				height: 80rpx;
				border-radius: 50px;
				background-color: #db1b22;
				z-index: 1000;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text {
					color: #fff;
				}
			}
		}
		uni-goods-nav {
			width: 100%;

			background-color: #fff;
			/deep/.uni-tab__cart-sub-right {
				margin: 7px 0;
				.uni-tab__cart-button-right {
					margin-right: 10rpx;
				}
			}
			/deep/.uni-tab__cart-sub-left {
				padding: 0;
				.uni-tab__cart-button-left {
					&:first-child {
						.uni-tab__icon {
							background: url(@/static/goods_shopping.png) no-repeat 0px 0px;
							background-size: 40rpx 40rpx;
							    width:  40rpx;
							    height:  40rpx;
						}
						.uni-tab__text{
							    font-size: 10px;
						}
					}
					&:nth-child(2) {
						.uni-tab__icon {
							background: url(@/pagesA/static/copy2@2x.png) no-repeat 0px 0px;
							background-size: 40rpx 40rpx;
							    width:  40rpx;
							    height:  40rpx;
						}
						.uni-tab__text{
							    font-size: 10px;
						}
					}
					&:nth-child(3) {
						.uni-tab__icon {
							background: url(@/pagesA/static/copy2备份@2x.png) no-repeat 0px 0px;
							background-size: 40rpx 40rpx;
							    width:  40rpx;
							    height:  40rpx;
						}
						.uni-tab__text{
							    font-size: 10px;
						}
					}
				}
			}
			/deep/.uni-tab__cart-sub-right {
				margin-left: 10px;
			}
			/deep/.uni-tab__cart-button-right {
				border-radius: 100px;
				margin-right: 20rpx;
			}
		}

		.share {
			width: 84rpx;
			height: 84rpx;
			position: fixed;
			bottom: 200rpx;
			right: 30rpx;
			z-index: 1000;
		}

		.navtop {
			width: 100%;
			// height: 200rpx;
			height: 0;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100000;

			navigator {
				position: absolute;
				top: 98rpx;
				left: 20rpx;
				width: 70rpx;
				height: 70rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		uni-swiper-dot {
			position: relative;

			.swiper-box {
				height: 750rpx;

				image {
					width: 750rpx;
					height: 750rpx;
				}
			}
			.djs {
				position: absolute;
				bottom: 40rpx;
				right: 228rpx;
				padding: 0 30rpx;
				height: 70rpx;
				border-radius: 50px;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				.text {
					color: #fff;
					margin-left: 10rpx;
					font-size: 30rpx;
				}
			}
			.instructions {
				position: absolute;
				bottom: 36rpx;
				right: 36rpx;
				width: 48rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				font-size: 20rpx;
				color: #000;
				background: #ffffff;
				border-radius: 2px;
			}
		}

		& > .title {
			background-color: #fff;
			margin-bottom: 20rpx;
			// padding-bottom: 20rpx;

			.price {
				color: #db1b22;
				font-weight: 600;
				font-size: 48rpx;
				display: flex;
				justify-content: space-between;
				text {
					font-size: 30rpx;
				}
				.price_right {
					display: flex;
					align-items: center;
				}
			}

			.Endorsement {
				display: flex;
				justify-content: space-between;

				.priceLeft {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					background: url(@/static/label_money.png) no-repeat 108rpx 4rpx;
					background-size: 108rpx 30rpx;
					padding-right: 110rpx;
					background-position-x: right;
				}

				.priceRight {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
					background: url(@/static/goods_how.png) no-repeat 168rpx 2rpx;
					padding-right: 35rpx;
					background-size: 28rpx 28rpx;
				}

				& > .Title {
					margin: 20rpx 0;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.introduce {
				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
				}
				.content {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					background: url(@/static/goods_say.png) no-repeat 0 -12rpx;
					background-size: 100% 110%;
					padding: 10rpx 20rpx;
				}
			}
			.mm {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
			}

			.kuang {
				width: 690rpx;
				height: auto;
				margin: 20rpx auto;
				background: #f9fafb;
				border-radius: 6rpx;
				border: 1px solid #e5e6e7;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				position: relative;

				.ert {
					display: block;
					width: 0;
					height: 0;
					border-width: 0 20rpx 20rpx;
					border-style: solid;
					border-color: transparent transparent #e5e6e7;
					position: absolute;
					top: -20rpx;
					left: 7%;
					margin-left: -20rpx;

					.sdf {
						display: block;
						width: 0;
						height: 0;
						border-width: 0 20rpx 20rpx;
						border-style: solid;
						border-color: transparent transparent #fff;
						position: absolute;
						top: 1px;
						left: -20rpx;
					}
				}
			}
		}

		.advertisement {
			margin-top: 20rpx;
			// height: 90rpx;
			background: #3498f0;
		}

		.Discount {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			background: url(@/static/direction_right_gray.png) no-repeat 704rpx 30rpx;
			background-size: 24rpx 24rpx;
			background-color: #fff;

			.DiscountLeft {
				width: 52rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.DiscountContent {
				flex: 1;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;

				.DiscountItem {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ea302b;
					background: url(@/static/goods_redpacket.png) no-repeat 0px 0rpx;
					background-size: 100% 100%;
					padding: 0px 22rpx;
					margin: 0 10rpx;
					line-height: 40rpx;
				}

				.Option {
					background: none;
					color: #333333;
					font-size: 26rpx;
					padding: 0;
				}
			}

			.DiscountRight {
				padding-right: 20rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}
		}

		.Solid {
			height: 2rpx;
			background-color: #fff;

			view {
				margin: 0 30rpx;
				border-bottom: 1px solid #f7f7f7;
			}
		}

		.DiscountSolid {
			margin: 0;
		}

		.evaluate {
			margin: 20rpx 0;
			background-color: #fff;

			.evaluateTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: url(@/static/direction_right_gray.png) no-repeat 704rpx 36rpx;
				background-size: 24rpx 24rpx;
				padding: 30rpx;

				.evaluateLeft {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.evaluateRight {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					padding-right: 20rpx;
				}
			}

			.evaluateContent {
				border-top: 1px solid #f7f7f7;
				padding: 30rpx 0;

				.portrait {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					view {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin: 0 10rpx;
					}

					uni-rate {
						height: 100%;
					}
				}

				.time {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
					padding: 20rpx 0;
				}

				.content {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.Img {
					padding-top: 20rpx;
					overflow-x: scroll;

					image {
						width: 150rpx;
						height: 150rpx;
						margin-right: 20rpx;
						border-radius: 5px;
					}
				}
			}
			.evaluateContent1{
				display: flex;
				justify-content: center;
				align-items: center;
				border-top: 1px solid #DDDDDD;
				height: 90px;
				.title{
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #AAAAAA;
					width: 336rpx;
				}
			}
		}

		.recommend {
			background-color: #fff;
			/deep/.uni-swiper__dots-item {
				border: 0 !important;
			}
			.recommendTitle {
				/deep/scroll-view {
					z-index: 99 !important;
				}
				/deep/.v-tabs__container {
					border-bottom: 1px solid #f7f7f7;
					padding: 20rpx 0 !important;

					.v-tabs__container-line {
						height: 6rpx !important;
					}
				}
			}

			.recommendContent {
				padding: 30rpx;

				.swiper-recommendBox {
					height: 740rpx;
				}

				.swiper-item {
					display: flex;
					flex-wrap: wrap;
				}

				.recommendItem {
					margin: 8rpx;
					width: 31%;
					display: flex;
					flex-direction: column;

					image {
						width: 220rpx;
						height: 220rpx;
						border-radius: 10rpx 10rpx 0 0;
					}

					.ItemTitle {
						height: 60rpx;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.ItemPrice {
						font-size: 22rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #db1b22;
					}

					.ItemTag {
						display: flex;

						view {
							border-radius: 40rpx;
							border: 1px solid #db1b22;
							padding: 0 2rpx;
							margin: 0 2rpx;
							font-size: 18rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #db1b22;
						}
					}
				}
			}
		}

		.Notice {
			padding: 30rpx;
			margin-top: 20rpx;
			padding-bottom: 0;
			background-color: #fff;

			.NoticeTitle {
				font-size: 32rpx;
				padding-bottom: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.NoticeReminder {
				display: flex;
				padding: 24rpx 0;
				border-top: 1px dashed #f7f7f7;

				.ReminderLeft {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #aaaaaa;
					width: 150rpx;
				}

				.ReminderRight {
					flex: 1;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.NoticeClick {
				display: flex;
				padding: 24rpx 0;
				border-top: 1px solid #f7f7f7;
				align-items: center;
				justify-content: center;

				view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
}
</style>
